<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-7 col-lg-7 col-md-7 header">登录</div>
      <div class="col-xs-5 col-lg-5 col-md-5 hinder" @click="toRegist">
        没有帐号？点击注册
      </div>
      <div class="col-xs-12 col-lg-12 col-md-12 user">
        <el-input
          class="col-xs-12 col-lg-12 col-md-12"
          placeholder="请输入邮箱"
          v-model="UserName"
          clearable
          @blur="review1"
        ></el-input>
      </div>
      <div class="col-xs-12 col-lg-12 col-md-12 psd">
        <el-input
          class="col-xs-12 col-lg-12 col-md-12"
          placeholder="请输入密码"
          v-model="password"
          show-password
          @blur="review2"
        ></el-input>
      </div>
      <div class="col-xs-12 col-lg-12 col-md-12 bottom">
        <el-button type="primary" round @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      UserName: "",
      password: "",
    };
  },
  methods: {
    review1() {
      if (this.UserName == "") {
        this.$message({
          message: "用户名不能为空",
          type: "warning",
        });
      }
    },
    review2() {
      if (this.password == "") {
        this.$message({
          message: "密码不能为空",
          type: "warning",
        });
      }
    },
    toRegist() {
      this.$router.push({
        name: "regist",
      });
    },
    login() {
      var Inf = {
        name: this.UserName,
        psd: this.password,
      };
      this.$store.dispatch("getLogin", Inf);
      this.UserName = "";
      this.password = "";
      this.$nextTick(function () {
        setTimeout(() => {
          if (this.loginInf != "") {
            localStorage.setItem("token", this.loginInf);
            this.$router.push({
              name: "home",
              params: {
                token: this.loginInf,
              },
            });
          } else {
            this.$message({
              message: "用户名或密码错误",
              type: "warning",
            });
          }
        }, 1000);
      });
    },
  },
  computed: {
    ...mapState({
      loginInf: (state) => state.one.loginInf,
    }),
  },
};
</script>

<style scoped>
.el-input__icon {
  width: 45px !important;
}
.hinder {
  font-size: 10px;
  color: red;
  margin-top: 40px;
  cursor: pointer;
}
.el-input {
  margin-left: 0 !important;
  width: 100% !important;
  margin-top: 20px;
}
.el-button {
  width: 200px;
}
.header {
  font-size: 24px;
  color: black;
  text-align: right;
  margin-top: 20px;
}
.bottom {
  text-align: center;
  margin-top: 20px;
}
</style>